<mat-toolbar class="wdl-sub-toolbar">
  <mat-toolbar-row>
    <div class="app-title">{{"deviceMgt" | translate}}</div>
    <div class="btn-group">
      <button type="button" class="btn btn-light" (click)="add()" *ngIf="isUserQualified()">
        <mat-icon svgIcon="add" style="color: green;"></mat-icon>
        {{"add" | translate}}
      </button>
      <button type="button" class="btn btn-light" (click)="find()" *ngIf="isUserQualified4find()">
        <mat-icon svgIcon="find" style="color: blue;"></mat-icon>
        {{"find" | translate}}
      </button>
      <button type="button" class="btn btn-light" (click)="checkAndUpload()" *ngIf="isUserQualified4find()">
        <mat-icon svgIcon="import" style="color: green;"></mat-icon>
        {{"upgrade" | translate}}
      </button>
    </div>

    <span class="header-spacer"></span>

    <mat-form-field class="type-selection">
      <mat-select [value]="deviceType" (selectionChange)="deviceTypeChanges($event)">
        <mat-option value="00">{{'allTypes' | translate}}</mat-option>
        <mat-option value="01">{{'device01' | translate}}</mat-option>
        <mat-option value="02">{{'device02' | translate}}</mat-option>
        <mat-option value="03">{{'device03' | translate}}</mat-option>
        <mat-option value="04">{{'device04' | translate}}</mat-option>
        <mat-option value="05">{{'device05' | translate}}</mat-option>
        <mat-option value="06">{{'device06' | translate}}</mat-option>
        <mat-option value="07">{{'device07' | translate}}</mat-option>
        <mat-option value="08">{{'device08' | translate}}</mat-option>
        <mat-option value="09">{{'device09' | translate}}</mat-option>
        <mat-option value="10">{{'device10' | translate}}</mat-option>
        <mat-option value="20">{{'device20' | translate}}</mat-option>
      </mat-select>
    </mat-form-field>

    <div class="input-group" style="width: 260px !important;">
      <input type="text" [(ngModel)]="searchText" class="form-control" matTooltip="{{'searchDevice' | translate}}" placeholder="{{'searchDevice' | translate}}">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="refreshSearch()" matTooltip="{{'refreshSearch' | translate}}">
          <mat-icon svgIcon="search" class="hst-color"></mat-icon>
        </button>
      </div>
    </div>
  </mat-toolbar-row>
</mat-toolbar>

<div class="wdl-container mat-elevation-z8">
  <div class="wdl-loading-shade" *ngIf="isLoadingResults">
    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
  </div>

  <div class="wdl-table-container wdl-table-container-page">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"
     matSort matSortActive="deviceId" matSortDirection="asc">
      <ng-container matColumnDef="number">
        <th mat-header-cell *matHeaderCellDef>{{"number" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.number}}</td>
      </ng-container>

      <ng-container matColumnDef="deviceId">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"deviceId" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.deviceId}}</td>
      </ng-container>

      <ng-container matColumnDef="deviceType">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"deviceType" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.deviceType | translate}}</td>
      </ng-container>

      <ng-container matColumnDef="personName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"bind" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{element.personName}}</td>
      </ng-container>

      <ng-container matColumnDef="updateTime">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{"updateTime" | translate}}</th>
        <td mat-cell *matCellDef="let element">{{(element.updateTime === 0) ? '-' :  (element.updateTime | date: 'yyyy-MM-dd HH:mm:ss')}}</td>
      </ng-container>

      <ng-container matColumnDef="actions" *ngIf="isUserQualified()" stickyEnd>
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element">
          <button mat-icon-button (click)="remove(element)" matTooltip="{{'remove' | translate}}">
            <mat-icon svgIcon="delete" style="color: darkred;"></mat-icon>
          </button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>

  <mat-paginator
   [length]="resultsLength"
   [pageSize]="pageSize"
   [showFirstLastButtons]="true"
   [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
